Matterport SDK および webpack を使った実装を TypeScript で書き直す
こんにちは、CX事業本部 Delivery部の若槻です。
前回のエントリでは、Node.js(JavaScript)で Matterport SDK を使ってみました。
しかし、この時参考にしたチュートリアルではサンプルコードが TypeScript だったのですが、実行環境の構築手順や型のインポートインポート方法が省かれていたため、その部分の調査を省くため JavaScript で書き直していました。
今回は、前回までの Matterport SDK の JavaScript の実装をちゃんと TypeScript で書いてみたいと思います。
やってみた
webpack の TypeScript 対応
Matterport SDK を利用して 3D Showcase を表示する localhost の起動には webpack を利用していたので、この webpack を TypeScript に対応させつつ引き続き利用してみます。
必要なパッケージをインストールします。ts-loader を使用すると TypeScript 形式のファイルを JavaScript に変換することができます。
npm install --save-dev typescript ts-loader
webpack.config.js
を更新して、TypeScript に対応させます。
const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './index.ts', // ファイル拡張子を.jsから.tsに変更 output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js', }, module: { rules: [ { test: /\.tsx?$/, // TypeScriptファイルに対応する正規表現 use: 'ts-loader', // ts-loaderを使用して、TypeScriptをJavaScriptに変換 exclude: /node_modules/, }, ], }, resolve: { extensions: ['.tsx', '.ts', '.js'], // モジュール解決時に、.tsと.tsxファイルを探すように設定 }, plugins: [ new HtmlWebpackPlugin(), new webpack.EnvironmentPlugin({ SDK_KEY: 'SDK_KEY', }), ], };
実装の変更
index.js
をindex.ts
に変更して、TypeScript で実装し直します。
import { setupSdk } from '@matterport/sdk'; import * as MpSdk from '@matterport/sdk'; // MpSdkに@matterport/sdkの型をインポート const SDK_KEY = process.env.SDK_KEY || ''; const main = async () => { const mpSdk = await setupSdk(SDK_KEY); class PoseObserver implements MpSdk.IObserver<MpSdk.Camera.Pose> { onChanged(pose: MpSdk.Camera.Pose) { console.log(JSON.stringify(pose)); console.log(pose); } } mpSdk.Camera.pose.subscribe(new PoseObserver()); }; main().catch((err) => console.error('Error:', err));
PoseObserver
クラスのインターフェイスを MpSdk.IObserver<MpSdk.Camera.Pose>
として定義し、また onChanged
メソッドの引数の型を MpSdk.Camera.Pose
として定義しています。
npm run dev
(webpack serve --mode=development
)コマンドを実行して、webpack でサーバーを起動します。
すると TypeScript へのトランスパイルが行われ、localhost
を起動することができました。
参考
以上